<!--
 * @Author: 260156 260156@gree.com.cn
 * @Date: 2022-09-15 11:26:10
 * @LastEditors: 260156 260156@gree.com.cn
 * @LastEditTime: 2022-09-15 11:39:47
 * @FilePath: \gree-zst-web\src\components\tabs\DynamicCompTabs.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by 260156 260156@gree.com.cn, All Rights Reserved. 
-->
<template>
  <section class="dynamic-comp-tabs-wrapper">
    <header>
      <my-radio-group
        v-model="currentCompIndex"
        :radios="props.components"
      ></my-radio-group>
    </header>
    <section>
      <my-transition name="tab">
        <keep-alive>
          <component :is="currentComp"></component>
        </keep-alive>
      </my-transition>
    </section>
  </section>
</template>

<script lang="ts" setup>
import type { Component } from "vue";

interface Props {
  components: Array<{
    label: string;
    value: string | number;
    comp: Component;
  }>;
}
const props = defineProps<Props>();

const currentCompIndex = ref(props.components[0].value);
const currentComp = computed(
  () =>
    props.components.filter((item) => item.value === currentCompIndex.value)[0]
      .comp
);
</script>

<style lang="scss" scoped>
.dynamic-comp-tabs-wrapper {
  text-align: left;
  header {
    margin-bottom: 18px;
    :deep(.el-radio-button__inner) {
      padding: 10px 28px;
    }
  }
}
</style>
